/**
 * 溢出工具类
 *
 * 溢出类：
 * overflow-[type]
 * overflow-x-[type]
 * overflow-y-[type]
 *
 * 文本溢出类：
 * truncate (文本截断单行)
 * truncate-2 (文本截断2行)
 * truncate-3 (文本截断3行)
 * text-ellipsis (省略号)
 * text-clip (裁剪)
 *
 * 空白符类：
 * whitespace-[type]
 *
 * type: 支持的类型
 * - overflow: auto|hidden|scroll|visible
 * - whitespace: nowrap|normal|pre|pre-wrap|pre-line
 */

// 溢出类型映射
$overflow-types: (
  'auto': auto,
  'hidden': hidden,
  'scroll': scroll,
  'visible': visible,
);

// 溢出方向映射
$overflow-directions: (
  'x': overflow-x,
  'y': overflow-y,
);

// 空白符类型映射
$whitespace-types: (
  'nowrap': nowrap,
  'normal': normal,
  'pre': pre,
  'pre-wrap': pre-wrap,
  'pre-line': pre-line,
);

// 生成基础溢出类
@each $name, $value in $overflow-types {
  .overflow-#{$name} {
    overflow: $value;
  }
}

// 生成方向溢出类
@each $dir, $prop in $overflow-directions {
  @each $name, $value in $overflow-types {
    .overflow-#{$dir}-#{$name} {
      #{$prop}: $value;
    }
  }
}

// 生成空白符类
@each $name, $value in $whitespace-types {
  .whitespace-#{$name} {
    white-space: $value;
  }
}

// 生成单行溢出类
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 生成多行溢出类
@for $i from 2 through 3 {
  .truncate-#{$i} {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: #{$i};
    -webkit-box-orient: vertical;
    -webkit-line-clamp: #{$i};
  }
}
